<template>
  <div :class="['eng','flex-row-center',computedActive]">
    {{eng.value}}
  </div>
</template>

<script setup lang="ts">
import {ref, defineProps, computed} from "vue"
import {RecordItem, RecordStatus} from "@/ts/record";

let props = defineProps<{
  eng:RecordItem
}>()
let computedActive=computed(()=>{
  switch (props.eng.status){
    case RecordStatus.VOID:return 'void-status';
    case RecordStatus.SUCCESS:return 'success-status';
    case RecordStatus.ERROR:return 'error-status';
  }
  return 'void-status'
})
</script>

<style scoped lang="less">
  .eng{
    border-radius: 0.2em;
    width: fit-content;
    padding: 0.2em;

  }
</style>